<template>
  <div>
    <!-- 百度地图 -->
    <div id="bai-du-map" style="height: 200px; width: 200px"></div>
    <input type="text" v-model="searchQuery" placeholder="输入地区进行搜索" />
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  // 设置安全密钥
  securityJsCode: "72db4857fce5019bf02412d8cf4e8089",
};
export default {
  props: ["iptId"],
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null,
      lng: 113.65553,
      lat: 34.748764,
      searchQuery: "",
      marker: null, // 标记点
    };
  },
  methods: {
    initMap() {
      const self = this;
      AMapLoader.load({
        key: "b4b1625dbcab8dccbf8a98b1ca215786",
        version: "2.0",
        plugins: ["AMap.AutoComplete", "AMap.PlaceSearch"],
      })
        .then((AMap) => {
          self.map = new AMap.Map("bai-du-map", {
            viewMode: "2D",
            zoom: 13,
            center: [self.lng, self.lat],
            resizeEnable: true,
          });

          self.auto = new AMap.AutoComplete({
            input: self.iptId,
          });
          self.placeSearch = new AMap.PlaceSearch({
            map: self.map,
            panel: "panel",
            autoFitView: true,
            extensions: "base",
          });
          self.auto.on("select", self.select);

          // 鼠标点击获取经纬度
          self.map.on("click", function (e) {
            console.log("经度", e.lnglat.getLng());
            console.log("纬度", e.lnglat.getLat());
            self.lng = e.lnglat.getLng();
            self.lat = e.lnglat.getLat();
            if (self.marker) {
              self.marker.setPosition([self.lng, self.lat]);
            } else {
              self.marker = new AMap.Marker({
                position: [self.lng, self.lat],
                map: self.map,
              });
            }
          });

          // 监听搜索框输入变化
          self.$watch("searchQuery", function (newValue) {
            if (newValue) {
              self.placeSearch.search(newValue);
            }
          });

          // 监听地点搜索结果
          self.placeSearch.on("complete", function (result) {
            const pois = result.poiList.pois;
            if (pois.length > 0) {
              const firstPoi = pois[0];
              const location = [
                firstPoi.location.getLng(),
                firstPoi.location.getLat(),
              ];
              if (self.marker) {
                self.marker.setPosition(location);
              } else {
                self.marker = new AMap.Marker({
                  position: location,
                  map: self.map,
                });
              }
              self.map.setCenter(location);
            }
          });

          // 初始化标记点
          self.marker = new AMap.Marker({
            position: [self.lng, self.lat],
            map: self.map,
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    select(e) {
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name);
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
